<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: [LCS]Kian_void
 * @LastEditTime: 2022-06-29 18:40:15
-->
<template>
  <div class="DataStatistics">
    <!-- 中国地图容器 -->
    <div id="china" class="map" style="height: 600px"></div>
    <!--广西地图容器 -->
    <el-radio-group
      style="margin: 10px; margin-top: 5%"
      v-model="dataType"
      @change="typeChange()"
    >
      <el-radio-button label="confirmedCount">已确诊人数</el-radio-button>
      <el-radio-button label="curedCount">已治愈人数</el-radio-button>
      <el-radio-button label="currentConfirmedCount"
        >目前确诊人数</el-radio-button
      >
      <el-radio-button label="deadCount">遇难人数</el-radio-button>
      <el-radio-button label="highDangerCount">高风险地区</el-radio-button>
      <el-radio-button label="midDangerCount">中风险地区</el-radio-button>
      <el-radio-button label="suspectedCount">疑似病例</el-radio-button>
    </el-radio-group>

    <div id="gx" class="map" style="height: 600px"></div>
    <!-- 模态框区域 -->
   
      <el-dialog
        title="详细信息"
        :visible.sync="dialogTableVisible"
        width="80%"
        top="0"
      >
        <el-table :data="tableData" border>
          <el-table-column
            property="cityName"
            label="次级行政单位"
            align="center"
          ></el-table-column>
          <el-table-column
            property="confirmedCount"
            label="已确诊人数"
            align="center"
          ></el-table-column>
          <el-table-column
            property="curedCount"
            label="已治愈人数"
            align="center"
          ></el-table-column>
          <el-table-column
            property="currentConfirmedCount"
            label="目前确诊人数"
            align="center"
          ></el-table-column>
          <el-table-column
            property="deadCount"
            label="遇难人数"
            align="center"
          ></el-table-column>
          <el-table-column
            property="highDangerCount"
            label="高风险地区"
            align="center"
          ></el-table-column>
          <el-table-column
            property="midDangerCount"
            label="中风险地区"
            align="center"
          ></el-table-column>
          <el-table-column
            property="suspectedCount"
            label="疑似病例"
            align="center"
          ></el-table-column>
        </el-table>
      </el-dialog>
   
    <!-- <button @click="log"></button> -->
  </div>
</template>

<script>
import axios from "axios";
import china from "../assets/china.json"
import guangxi from "../assets/guangxi.json"
export default {
  // 一般情况下，图表类生成在mounted生命周期中去进行
  // created生命周期中只有data和methods的初始化，并没有完成dom加载
  data() {
    return {
      tableData: [],
      dialogTableVisible: false,
      dataContent: [
        { type: "confirmedCount", content: "已确诊人数" },
        { type: "curedCount", content: "已治愈人数" },
        { type: "currentConfirmedCount", content: "目前确诊人数" },
        { type: "deadCount", content: "遇难人数" },
        { type: "highDangerCount", content: "高风险地区" },
        { type: "midDangerCount", content: "低风险地区" },
        { type: "suspectedCount", content: "疑似病例" },
      ],
      dataType: "confirmedCount",
      chinaCovData: "",
      gxCovData: "",
      data: { name: "", value: 1 },
      provinceData: [], //省份数据
      res: [],
      provinceName: [
        { name: "广西", string: "guangxi" },
        { name: "北京", string: "beijing" },
        { name: "天津", string: "tianjin" },
        { name: "河北", string: "hebei" },
        { name: "山西", string: "shanxi" },
        { name: "内蒙古", string: "neimenggu" },
        { name: "辽宁", string: "liaoning" },
        { name: "吉林", string: "jilin" },
        { name: "黑龙江", string: "heilongjiang" },
        { name: "上海", string: "shanghai" },
        { name: "江苏", string: "jiangsu" },
        { name: "浙江", string: "zhejiang" },
        { name: "安徽", string: "anhui" },
        { name: "福建", string: "fujian" },
        { name: "江西", string: "jiangxi" },
        { name: "山东", string: "shandong" },
        { name: "河南", string: "henan" },
        { name: "湖北", string: "hubei" },
        { name: "湖南", string: "hunan" },
        { name: "广东", string: "guangdong" },
        { name: "海南", string: "hainan" },
        { name: "重庆", string: "chongqing" },
        { name: "四川", string: "sichuan" },
        { name: "贵州", string: "guizhou" },
        { name: "云南", string: "yunnan" },
        { name: "西藏", string: "xizang" },
        { name: "陕西", string: "shanxi2" },
        { name: "甘肃", string: "gansu" },
        { name: "青海", string: "qinghai" },
        { name: "宁夏", string: "ningxia" },
        { name: "新疆", string: "xinjiang" },
        { name: "香港", string: "xianggang" },
        { name: "澳门", string: "aomen" },
        { name: "台湾", string: "taiwan" },
      ],
      confirmedCountClasses: [
        {
          // 对应区间的颜色
          color: "#42d220",
          // 从哪开始
          from: 0,
        },
        {
          // 对应区间的颜色
          color: "#FCE2D8",
          // 从哪开始
          from: 1,
          // 到哪结束
          to: 9,
        },
        {
          // 对应区间的颜色
          color: "#FC9783",
          // 从哪开始
          from: 10,
          // 到哪结束
          to: 50,
        },
        {
          // 对应区间的颜色
          color: "#F27466",
          // 从哪开始
          from: 51,
          // 到哪结束
          to: 100,
        },
        {
          // 对应区间的颜色
          color: "#E34445",
          // 从哪开始
          from: 101,
          // 到哪结束
          to: 150,
        },
        {
          // 对应区间的颜色
          color: "#B60909",
          // 从哪开始
          from: 151,
        },
      ], //已确诊阶块
      curedCountClasses: [
        {
          // 对应区间的颜色
          color: "#d8fbd8",
          // 从哪开始
          from: 0,
        },
        {
          // 对应区间的颜色
          color: "#d8fbd8",
          // 从哪开始
          from: 1,
          // 到哪结束
          to: 9,
        },
        {
          // 对应区间的颜色
          color: "#75df75",
          // 从哪开始
          from: 10,
          // 到哪结束
          to: 50,
        },
        {
          // 对应区间的颜色
          color: "#5bc75b",
          // 从哪开始
          from: 51,
          // 到哪结束
          to: 100,
        },
        {
          // 对应区间的颜色
          color: "#5bc75b",
          // 从哪开始
          from: 101,
          // 到哪结束
          to: 150,
        },
        {
          // 对应区间的颜色
          color: "#36a736",
          // 从哪开始
          from: 151,
        },
      ], //已确诊阶块
    };
  },
  mounted() {
    this.getChinaCovData();
  },
  created() {},
  methods: {
    // test(a){
    //     let num=123;
    //     console.log(a);
    //     a(num);
    // },
    // log(){
    //   this.test(function (n) { console.log(n); })
    // },
    typeChange() {
      // console.log(this.dataType);
      let list = this.dataContent;
      list = list.filter((item) => {
        return item.type == this.dataType;
      });
      this.gxCovData = this.res.data.data.filter((item) => {
        return item.provinceShortName == "广西";
      });
      // 加工广西数据
      this.gxCovData = this.gxCovData[0].cities.map((item) => {
        return {
          adcode: item.locationId,
          value: item[this.dataType],
        };
      });
      let name = [{ name: "广西", string: "guangxi", dataContentLs: list }]; 
      this.loadProvinceMaps(name);
    },
    // 获取中国疫情相关数据
    getChinaCovData() {
      axios({
        url: "https://api.muxiaoguo.cn/api/epidemic?type=epidemicInfectionData&api_key=a763ed07fd31bf1b",
      }).then((res) => {
        // console.log(res.data.data);
        this.res = res;
        // 加工中国数据
        this.chinaCovData = res.data.data.map((item) => {
          return {
            name: item.provinceShortName,
            value: item.confirmedCount,
          };
        });
       this.chinaCovData.push({name:"南海诸岛",value:0})

        // 拿各个省份的数据
        this.provinceData = res.data.data.map((item) => {
          return {
            name: item.provinceShortName,
            value: item.confirmedCount,
            cities: item.cities,
          };
        });
        // 过滤广西数据
        this.gxCovData = res.data.data.filter((item) => {
          return item.provinceShortName == "广西";
        });
        // 加工广西数据
        this.gxCovData = this.gxCovData[0].cities.map((item) => {
          return {
            adcode: item.locationId,
            value: item.confirmedCount,
          };
        });
        this.loadChinaMaps();
        let name = [
          {
            name: "广西",
            string: "guangxi",
            dataContentLs: [{ type: "confirmedCount", content: "已确诊人数" }],
          },
        ];
        this.loadProvinceMaps(name);
      });
    },
    // 加载中国地图
    loadChinaMaps() {
      let _this = this;
      // 初始化图表
      var map = new Highcharts.Map("china", {
        title: {
          text: "各省市疫情确诊情况",
        },
        // 颜色轴
        colorAxis: {
          // // 最小值
          // min: 0,
          // // 最小颜色
          // minColor: "rgb(255,255,255)",
          // // 最大颜色
          // maxColor: "#006cee",
          // 分区间色块处理
          dataClasses: [
            {
              // 对应区间的颜色
              color: "green",
              // 从哪开始
              from: 0,
            },
            {
              // 对应区间的颜色
              color: "#FCE2D8",
              // 从哪开始
              from: 1,
              // 到哪结束
              to: 9,
            },
            {
              // 对应区间的颜色
              color: "#FC9783",
              // 从哪开始
              from: 10,
              // 到哪结束
              to: 99,
            },
            {
              // 对应区间的颜色
              color: "#F27466",
              // 从哪开始
              from: 100,
              // 到哪结束
              to: 999,
            },
            {
              // 对应区间的颜色
              color: "#E34445",
              // 从哪开始
              from: 1000,
              // 到哪结束
              to: 9999,
            },
            {
              // 对应区间的颜色
              color: "#B60909",
              // 从哪开始
              from: 10000,
            },
          ],
        },
        series: [
          {
            data: this.chinaCovData,
            //

            name: "确诊数据",
            mapData:china,
            joinBy: "name", // 根据 name 属性进行关联
            events: {
              click: function (e) {
                // console.log(e.point.name);
                // console.log(e);
                // 过滤出表格城市数据
                let data = _this.res.data.data;
                data = data.filter((item) => {
                  return item.provinceShortName == e.point.name;
                });
                // console.log(data);
                // 判断有无次级行政区域
                if (data[0].cities.length != 0) {
                  // 数据取正
                  data[0].cities = data[0].cities.map((item) => {
                    if (item.cityName == "待明确地区") {
                      item.currentConfirmedCount = Math.abs(
                        item.currentConfirmedCount
                      );
                    }
                    return item;
                  });
                  _this.tableData = data[0].cities;
                  _this.dialogTableVisible = true;
                } else {
                  // console.log(data[0]);

                  _this.tableData = [data[0]];
                  _this.tableData[0].cityName = data[0].provinceShortName;

                  _this.dialogTableVisible = true;
                }
              },
            },
          },
        ],
        // 地图的一些导航相关配置
        mapNavigation: {
          enableButtons: true, // 是否启用缩放按钮
        },
      });
    },
    // 加载省份数据
    loadProvinceMaps(name) {
      // let data = [{ adcode: 451400, value: 200 }];
      // console.log(name);
      var map = new Highcharts.Map("gx", {
        title: {
          text: "广西壮族自治区疫情" + name[0].dataContentLs[0].content,
          // name[0].name,
        },
        colorAxis: {
          dataClasses:
            this.dataType == "curedCount"
              ? this.curedCountClasses
              : this.confirmedCountClasses,
        },
        series: [
          {
            data: this.gxCovData,
            name: name[0].dataContentLs[0].content,
            mapData:guangxi,
            joinBy: "adcode", // 根据 name 属性进行关联
            events: {
              click: function (e) {
                // console.log(e);
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
</style>
